<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link href="res/static/css/main.css" rel="stylesheet" type="text/css">
    <link href="res/layui/css/layui.css" rel="stylesheet" type="text/css">
    <script src="res/static/js/util/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="res/static/js/util/jquery.cookie.js" type="text/javascript"></script>
    <script src="res/layui/layui.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home">
            <i class="layui-icon layui-icon-home"></i>
            <a href="/">首页</a>
        </p>
        <div class="sn-quick-menu">
            <div class="login"><a href="login.html" id="loginbtn">登录</a></div>
            <div class="sp-cart"><a href="shopcart.html">购物车</a><span id="cart-num">0</span></div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="index.html" title="极品商城">
                    <img src="res/static/img/logo.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="search_list.html" class="layui-form" novalidate>
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="title"
                           placeholder="请输入需要的商品"
                           required type="text">
                    <button class="layui-btn" lay-filter="formDemo" lay-submit>
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input name="" type="hidden" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base shopcart-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a class="active" href="shopcart.html">购物车</a>
                    <a href="" id="wait"></a>
                    <a href="" id="all_orders"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="banner-bg w1200">
        <h3>夏季清仓</h3>
        <p>宝宝被子、宝宝衣服3折起</p>
    </div>
    <div class="cart w1200">
        <div class="cart-table-th">
            <div class="th th-chk">
                <div class="select-all">
                    <div class="cart-checkbox">
                        <input class="check-all check" id="allCheckked" type="checkbox" value="true">
                    </div>
                    <label>&nbsp;&nbsp;全选</label>
                </div>
            </div>
            <div class="th th-item">
                <div class="th-inner">
                    商品
                </div>
            </div>
            <div class="th th-price">
                <div class="th-inner">
                    单价
                </div>
            </div>
            <div class="th th-amount">
                <div class="th-inner">
                    数量
                </div>
            </div>
            <div class="th th-sum">
                <div class="th-inner">
                    小计
                </div>
            </div>
            <div class="th th-op">
                <div class="th-inner">
                    操作
                </div>
            </div>
        </div>
        <div class="OrderList">
            <div class="order-content" id="list-cont">

            </div>
        </div>

        <div class="FloatBarHolder layui-clear">
            <div class="th th-chk">
                <div class="select-all">
                    <div class="cart-checkbox">
                        <input class="check-all check" id="" name="select-all" type="checkbox" value="true">
                    </div>
                    <label>&nbsp;&nbsp;已选<span class="Selected-pieces">0</span>件</label>
                </div>
            </div>
            <div class="th batch-deletion">
                <span class="batch-dele-btn">批量删除</span>
            </div>
            <div class="th Settlement">
                <button class="layui-btn" id="layui-btn-settlement">结算</button>
            </div>
            <div class="th total">
                <p>应付：<span class="pieces-total">0</span></p>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        getCartNum();
        showGoods();
        // 调用
        var x = getCookie("userTel");
        if (x != null && x !== "") {
            $("#loginbtn").html("个人中心");
            $("#loginbtn").prop("href", "consumer_center.html");
            $("#wait").html("待收货");
            $("#wait").prop("href", "package.html");
            $("#all_orders").html("所有订单");
            $("#all_orders").prop("href", "all_order.html");
        }

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
            return "";
        }

        function getCartNum() {  //获取购物车中商品数量
            var index = 0;
            for (var i = 0; i < 30; i++) {
                if ($.cookie(i.toString()) == null) {

                } else {
                    index++;
                }
            }
            $("#cart-num").html(index);
            return index;
        }

        function showGoods() {
            var num = getCartNum();
            var content = "";
            if (num == 0) {
                content = "<p style='font-size: 20px;color: red;text-align: center;'>您还没有添加商品到购物车！</p>";
            } else {
                var i;
                for (i = 0; i < 30; i++) {
                    if ($.cookie(i.toString()) == null) {
                        continue;
                    }
                    var value = $.cookie(i.toString());
                    var arr = value.split(";");
                    content = content + "<ul class=\"item-content layui-clear\">\n" +
                        "            <li class=\"th th-chk\">\n" +
                        "              <div class=\"select-all\">\n" +
                        "                <div class=\"cart-checkbox\">\n" +
                        "                  <input class=\"CheckBoxShop check\" type=\"checkbox\" num=\"all\" name=\"select-all\" value=\"true\">\n" +
                        "                </div>\n" +
                        "              </div>\n" +
                        "            </li>\n" +
                        "            <li class=\"th th-item\">\n" +
                        "              <div class=\"item-cont\">\n" +
                        "                <a href=\"javascript:\"><img style='width: 100px;height: 100px;' src=" + arr[0] + " alt=\"\"></a>\n" +
                        "                <div class=\"text\">\n" +
                        "                  <div class=\"title\" style='height: 50px;overflow: hidden;'>" + arr[1] + "</div>\n" +
                        "                  <p><span>" + arr[2] + "</span>  <br>\n" +
                        "                    <span>商品ID：</span><span class=\"goodsid\">" + arr[3] + "</span><div class='cookieId' style='display: none;'>" + arr[6] + "</div>\n" +
                        "                  </p>\n" +
                        "\n" +
                        "                </div>\n" +
                        "              </div>\n" +
                        "            </li>\n" +
                        "            <li class=\"th th-price\">\n" +
                        "              <span class=\"th-su\">" + arr[4].substr(8) + "</span>\n" +
                        "            </li>\n" +
                        "            <li class=\"th th-amount\">\n" +
                        "              <div class=\"box-btn layui-clear\">\n" +
                        "                <div class=\"less layui-btn\">-</div>\n" +
                        "                <input class=\"Quantity-input\" type=\"\" name=\"\" value=" + arr[5] + " disabled=\"disabled\">\n" +
                        "                <div class=\"add layui-btn\">+</div>\n" +
                        "              </div>\n" +
                        "            </li>\n" +
                        "            <li class=\"th th-sum\">\n" +
                        "              <span class=\"sum\">" + (parseFloat(arr[4].substr(8)) * parseFloat(arr[5])).toFixed(2) + "</span>\n" +
                        "            </li>\n" +
                        "            <li class=\"th th-op\">\n" +
                        "              <span class=\"dele-btn\">删除</span>\n" +
                        "            </li>\n" +
                        "          </ul>"
                }
            }
            $("#list-cont").html(content);
        }


    })
</script>


<script type="text/javascript">
    layui.config({
        base: 'res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['mm', 'jquery', 'element', 'car'], function () {
        var mm = layui.mm, $ = layui.$, element = layui.element, car = layui.car;


        car.init()


    });


</script>
</body>
</html>